import React from "react"
import Image from "next/image"
import { imgList } from "../../../data"

type PhotoDetailProps = {
  params: Promise<{ id: string }>
}

const PhotoDetail = async (props: PhotoDetailProps) => {
  const { params } = props
  const { id } = await params
  const img = imgList.find((item) => item.id.toString() === id)

  if (!img) return null

  return (
    <div className="container mx-auto my-5">
      <div className="flex flex-col items-center gap-y-2">
        <div>
          <Image
            className="max-h-[600px] w-auto rounded-lg object-contain"
            src={img.path}
            alt="image"
            width={1328}
            height={1328}
            priority
          />
        </div>
        <div>
          <span>{img.desc}</span>
        </div>
      </div>
    </div>
  )
}

export default PhotoDetail
